<template>
	<view class="image-bottom">
		<image :src="src" @error="imageError" :style="{width:width,height:height}" :mode="mode"></image>
	</view>
</template>

<script setup>
	import {
		watch,
		ref
	} from 'vue';
	import { storeToRefs } from 'pinia';
	import { constStore } from '@/store/const.js';
	const props = defineProps({
		imgSrc: { type: String },
		width: {
			type: String,
			default: '750rpx'
		},
		height: {
			type: String,
			default: ''
		},
		mode: {
			type: String,
			default: 'widthFix'
		}
	});
	const { constInfo } = storeToRefs(constStore());
	const src = ref();
	watch(() => props.imgSrc, (newValue, oldValue) => {
		src.value = constInfo.value.srcConst + newValue;
	}, {
		deep: true,
		immediate: true
	});
	const imageError = e => {
		src.value = constInfo.value.srcConst + newValue;
	};
</script>

<style scoped lang="scss">
	::v-deep {
		image {
			vertical-align: bottom; // 解决image背景图片下方有10rpx 的白边
		}
	}
</style>